import Indicator from '@/components/indicator'
import React, { memo, useState } from 'react'
import { DemoWrapper } from './style'

const Demo = memo(() => {
  const names = ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'lll']
  // 当前选中的元素
  const [selectIndex, setSelectIndex] = useState(0)

  function handleToggleClick(isNext = true) {
    let newIndex = isNext ? selectIndex + 1 : selectIndex - 1
    // 边界判断
    if (newIndex < 0) {
      newIndex = names.length - 1
    } else if (newIndex > names.length - 1) {
      newIndex = 0
    }
    setSelectIndex(newIndex)
    console.log(newIndex)
  }

  return (
    <DemoWrapper>
      <div className="control">
        <button onClick={() => handleToggleClick(false)}>上一个</button>
        <button onClick={() => handleToggleClick(true)}>下一个</button>
      </div>
      <div className="list">
        <Indicator selectIndex={selectIndex}>
          {names.map((item) => {
            return <button key={item}>{item}</button>
          })}
        </Indicator>
      </div>
    </DemoWrapper>
  )
})

export default Demo
